<script id="navigationTemp" type="text/x-kendo-template">
    <div class="card position-absolute w-100 h-100">
        <div class="row no-gutters h-100 overflow-hidden">
            <div class="col-xl-3 h-100 overflow-auto">
                <div class="card-body">
                    <div id="navList"></div>
                </div>
            </div>
            <div class="col-xl-9 h-100 overflow-auto k-alt">
                <div class="card-body">
                    <div id="navEdit"></div>
                </div>
            </div>
        </div>
    </div>
    <script id="editTemplate" type="text/x-kendo-template">
        <div class="card" id="viewArea">
            <h5 class="card-header">
                <button class="k-button k-button-icontext theme-m-box" onclick="createTree();"><span class="k-icon k-i-add"></span>新增子导航</button>
            </h5>
            <div class="card-body">
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">当前导航 ID：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= id #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航排序：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= sort + 1 #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航名称：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= name #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航英文名称：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= subName #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航图标：</label>
                    <div class="col-lg-6">
                        <div class="mt-2"><i class="fa-lg mr-2 #= icon #"></i>#= icon #</div>
                    </div>
                </div>
                # if (parentId === '0') { #
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航折叠圆点提醒：</label>
                    <div class="col-lg-6">
                        <div class="mt-2"># if (dot === 1) { #是# } else { #否# } #</div>
                    </div>
                </div>
                # } #
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航徽章提醒：</label>
                    <div class="col-lg-6">
                        <div class="mt-2"><span class="mr-2">#= checkBadge(badge) #</span>#= badge #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接目录：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= directory #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接文件：</label>
                    <div class="col-lg-6">
                        <div class="mt-2">#= location #</div>
                    </div>
                </div>
                <div class="form-group row justify-content-lg-center">
                    <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航默认展开：</label>
                    <div class="col-lg-6">
                        <div class="mt-2"># if (expanded === 1) { #是# } else { #否# } #</div>
                    </div>
                </div>
            </div>
            # if (parentId !== 'root') { #
            <div class="card-footer text-center">
                <button class="k-button k-button-icontext mx-3 k-state-selected" onclick="updateTree();"><span class="k-icon k-i-edit"></span>编辑导航</button>
                <button class="k-button k-button-icontext mx-3 theme-s-box" onclick="destroyTree('#= id #', '#= name #');"><span class="k-icon k-i-close"></span>删除导航</button>
            </div>
            # } #
        </div>
        <div class="card hide" id="addArea">
            <h5 class="card-header">新增导航</h5>
            <div class="card-body">
                <form>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">父导航 ID：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="parentId" type="text" value="#= id #" readonly>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50"><strong class="k-required">*</strong>导航名称：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="name" type="text" placeholder="name" required data-required-msg="请输入导航名称！">
                            <span class="k-invalid-msg" data-for="name"></span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航英文名称：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="subName" type="text" placeholder="subName">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航图标：</label>
                        <div class="col-lg-6">
                            <span class="k-textbox k-space-left w-100">
                                <i class="fas fa-genderless"></i>
                                <input name="icon" type="text" placeholder="icon" onkeyup="iconShow(this);">
                            </span>
                        </div>
                    </div>
                    # if (parentId === '0') { #
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航折叠圆点提醒：</label>
                        <div class="col-lg-6">
                            <label class="k-radio-label"><input class="k-radio" name="dot" type="radio" value="1">是</label>
                            <label class="k-radio-label"><input class="k-radio" name="dot" type="radio" value="0" checked>否</label>
                        </div>
                    </div>
                    # } #
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航徽章提醒：</label>
                        <div class="col-lg-6">
                            <span class="k-textbox k-space-left w-100">
                                <i class="k-icon"><small class="d-flex justify-content-center align-items-center w-100 h-100"></small></i>
                                <input name="badge" type="text" placeholder="badge" onkeyup="badgeShow(this);">
                            </span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接目录：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="directory" type="text" placeholder="directory">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接文件：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="location" type="text" placeholder="location">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航默认展开：</label>
                        <div class="col-lg-6">
                            <label class="k-radio-label"><input class="k-radio" name="expanded" type="radio" value="1">是</label>
                            <label class="k-radio-label"><input class="k-radio" name="expanded" type="radio" value="0" checked>否</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center">
                <button class="k-button k-button-icontext mx-3 k-state-selected" onclick="saveCreateTree();"><span class="k-icon k-i-save"></span>保存</button>
                <button class="k-button k-button-icontext mx-3 theme-s-box" onclick="cancelTree();"><span class="k-icon k-i-cancel"></span>取消</button>
            </div>
        </div>
        <div class="card hide" id="editArea">
            <h5 class="card-header">编辑导航</h5>
            <div class="card-body">
                <form>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">当前导航 ID：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="id" type="text" value="#= id #" readonly>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航排序：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="sort" type="text" value="#= sort + 1 #" readonly>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50"><strong class="k-required">*</strong>导航名称：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="name" type="text" placeholder="name" value="#= name #" required data-required-msg="请输入导航名称！">
                            <span class="k-invalid-msg" data-for="name"></span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航英文名称：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="subName" type="text" placeholder="subName" value="#= subName #">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航图标：</label>
                        <div class="col-lg-6">
                            <span class="k-textbox k-space-left w-100">
                                <i class="#= icon #"></i>
                                <input name="icon" type="text" placeholder="icon" value="#= icon #" onkeyup="iconShow(this);">
                            </span>
                        </div>
                    </div>
                    # if (parentId === '0') { #
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航折叠圆点提醒：</label>
                        <div class="col-lg-6">
                            <label class="k-radio-label"><input class="k-radio" name="dot" type="radio" value="1"# if (dot === 1) { # checked# } #>是</label>
                            <label class="k-radio-label"><input class="k-radio" name="dot" type="radio" value="0"# if (dot === 0) { # checked# } #>否</label>
                        </div>
                    </div>
                    # } #
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航徽章提醒：</label>
                        <div class="col-lg-6">
                            <span class="k-textbox k-space-left w-100">
                                <i class="k-icon"><small class="d-flex justify-content-center align-items-center w-100 h-100">#= checkBadge(badge) #</small></i>
                                <input name="badge" type="text" placeholder="badge" value="#= badge #" onkeyup="badgeShow(this);">
                            </span>
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接目录：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="directory" type="text" placeholder="directory" value="#= directory #">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航链接文件：</label>
                        <div class="col-lg-6">
                            <input class="k-textbox w-100" name="location" type="text" placeholder="location" value="#= location #">
                        </div>
                    </div>
                    <div class="form-group row justify-content-lg-center">
                        <label class="col-form-label text-lg-right col-lg-2 text-black-50">导航默认展开：</label>
                        <div class="col-lg-6">
                            <label class="k-radio-label"><input class="k-radio" name="expanded" type="radio" value="1"# if (expanded === 1) { # checked# } #>是</label>
                            <label class="k-radio-label"><input class="k-radio" name="expanded" type="radio" value="0"# if (expanded === 0) { # checked# } #>否</label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="card-footer text-center">
                <button class="k-button k-button-icontext mx-3 k-state-selected" onclick="saveUpdateTree();"><span class="k-icon k-i-check"></span>更新</button>
                <button class="k-button k-button-icontext mx-3 theme-s-box" onclick="cancelTree();"><span class="k-icon k-i-cancel"></span>取消</button>
            </div>
        </div>
    </script>
    <style scoped>
        @media only screen and (max-width: 1199px) {
            .position-absolute {
                position: relative !important;
            }
        }
        .k-treeview .k-in i {
            margin-top: 2px;
            margin-right: 5px;
            font-size: 16px;
        }
        .k-treeview .k-in small {
            margin-left: 5px;
            opacity: .6;
        }
        .k-treeview .k-in sub {
            display: inline-block;
            bottom: -1px;
            margin-left: 6px;
            border-radius: 4px;
            padding: 2px 5px;
            height: 16px;
            font-family: "Microsoft YaHei", tahoma, sans-serif;
            font-size: 12px;
            line-height: 12px;
        }
        input[readonly] {
            color: #999;
            background: #f6f6f6;
        }
        .k-space-left i {
            position: absolute;
            left: 6px;
            top: 50%;
            margin: -8px 0 0 0;
            width: 16px;
            text-align: center;
        }
    </style>
</script>